<template>
    <div class="continer">
        <!-- 添加空间页面 -->
        <el-form
            :model="spaceData"
            label-width="120px"
            :rules="formRules"
            ref="formRef"
            autocomplete="off"
            class="addSpaceForm"
        >
            <table>
                <tr>
                    <td>
                        <el-form-item label="空间名称 : " prop="name">
                            <el-input v-model="spaceData.name" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="空间地址 : " prop="addr">
                            <el-input v-model="spaceData.addr" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="平面图 : " prop="plan">
                            <!-- 上传图片 -->
                            <el-upload
                                :action="BASE_URL+'/admin/file/upload/createfile'"
                                name="file"
                                :before-upload="upimgBefore"
                                :on-success="upimgSuccess"
                                :on-error="upimgError"
                                :show-file-list="false"
                            >
                                <el-button v-if="!spaceData.plan" size="small" type="primary" ref="btn">点击上传</el-button>
                                <img v-else :src="BASE_URL + '/' + spaceData.plan" class="form-img" />
                            </el-upload>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="工位数 : " prop="station">
                            <el-input v-model="spaceData.station" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="margin-bottom: 20px; width: 100%;">
                            <div style="display: inline-block;" class="roomNumText" v-for="(item, index) in spaceData.office" :key="index">
                                <el-form-item class="fangjian" style="width: 220px;" :label="index == 0 ? '房间 : ' : ''" :prop="'office.' + index +'.area'" :rules="officeRules.office" >
                                    <el-input v-model="item.area" placeholder="面积"></el-input>
                                </el-form-item>
                                <el-form-item label-width="0" class="fangjian" style="width: 130px;" :prop="'office.' + index +'.people_num'" :rules="item.area ? officeRules.office : officeRules.office0" >
                                    <el-input v-model="item.people_num" placeholder="预设工位数"></el-input>
                                </el-form-item>
                                <el-form-item label-width="0" class="fangjian" style="width: 160px;" :prop="'office.' + index +'.num'" :rules="item.area && item.people_num ? officeRules.office : officeRules.office0" >
                                    <el-input v-model="item.num" placeholder="该规模房间的数量"></el-input>
                                </el-form-item>
                                <el-button class="fangjian" @click="addRoomNum">+</el-button>
                                <span>点击添加新的房间信息输入框</span>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="margin-bottom: 20px; width: 100%;">
                            <div style="display: inline-block;" class="roomNumText" v-for="(item, index) in spaceData.meeting" :key="index">
                                <el-form-item class="fangjian" style="width: 220px;" :label="index == 0 ? '会议室 : ' : ''" :prop="'meeting.' + index +'.area'" :rules="meetingRules.meeting" >
                                    <el-input v-model="item.area" placeholder="面积"></el-input>
                                </el-form-item>
                                <el-form-item label-width="0" class="fangjian" style="width: 130px;" :prop="'meeting.' + index +'.people_num'" :rules="item.area ? meetingRules.meeting : meetingRules.meeting0" >
                                    <el-input v-model="item.people_num" placeholder="可容与会人数"></el-input>
                                </el-form-item>
                                <el-form-item label-width="0" class="fangjian" style="width: 160px;" :prop="'meeting.' + index +'.num'" :rules="item.area && item.people_num ? meetingRules.meeting : meetingRules.meeting0" >
                                    <el-input v-model="item.num" placeholder="该规模会议室的数量"></el-input>
                                </el-form-item>
                                <el-button class="fangjian" @click="addMeetingNum">+</el-button>
                                <span>点击添加新的会议室信息输入框</span>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="简介 : " prop="description">
                            <el-input type="textarea" :rows="6" style="width: 350px;" v-model="spaceData.description" placeholder="空间概况简介">{{spaceData.description.length}}</el-input>
                        </el-form-item>
                    </td>
                </tr>
            </table>
            <el-form-item class="txt_r mt_20">
                <el-button type="primary" @click="queren">确认</el-button>
                <el-button @click="quxiao">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { BASE_URL } from "../../../config/app";
    import { addSpace } from "../../../api/spaceManagement/index.js";

    export default {
        name: "addSpance",
        data() {
            return {
                spaceData: {
                    name: "",
                    addr: "",
                    plan: "",
                    station: "",
                    office: [{
                        area: "",
                        people_num: "",
                        num: ""
                    }],
                    meeting: [{
                        area: "",
                        people_num: "",
                        num: ""
                    }],
                    description: ""
                },
                formRules: {
                    name: [{required: true,message: "请输入空间名称",trigger: "blur"}],
                    addr: [{ required: true, message: "请输入地址", trigger: "blur" }],
                    station: [{ required: true, message: "请输入工位数", trigger: "blur" }],
                    plan: [{ required: true, message: "请上传平面图", trigger: "blur" }],
                    office: [{ required: true, message: "请输入房间信息", trigger: "blur" }],
                    meeting: [{ required: true, message: "请输入会议室信息", trigger: "blur" }],
                    description: [{ required: true, message: "请输入空间概况简介", trigger: "blur" }],
                },
                officeRules: {
                    office: [
                        { required: true, message: "请输入房间信息", trigger: "blur" }
                    ],
                    office0: [
                        { required: true, message: " ", trigger: "blur" }
                    ]
                },
                meetingRules: {
                    meeting: [
                        { required: true, message: "请输入会议室信息", trigger: "blur" }
                    ],
                    meeting0: [
                        { required: true, message: " ", trigger: "blur" }
                    ]
                 },
                // 上传图片
                BASE_URL: "",
                upimgLoding: false,
            };
        },
        methods: {
            // 点击添加房间信息输入框
            addRoomNum(){
                this.spaceData.office.push(
                    {
                        area: "",
                        people_num: "",
                        num: ""
                    }
                );
            },
            addMeetingNum(){
                this.spaceData.meeting.push(
                    {
                        area: "",
                        people_num: "",
                        num: ""
                    }
                );
            },
            // 上传图片
            upimgBefore(){
                this.upimgLoding = true;
            },
            upimgSuccess(data){
                this.upimgLoding = false;
                if (data.code) {this.$message.error('图片插入失败');return false;}
                this.spaceData.plan = data.data.key;
            },
            upimgError(){
                this.upimgLoding = false;
                this.$message.error('图片插入失败');
            },
            // 提交表单
            queren(){
                this.$refs['formRef'].validate((valid) => {
                    if (!valid) {return false;}
                    console.log(this.spaceData)
                    addSpace(this.spaceData).then((response) => {
                        console.log(response);
                        if(response.code == 0){
                            this.$message.success("添加成功");
                            window.history.back(-1); // 返回上一页
                        }else{
                            this.$message.error(response.message);
                        }
                    }).catch((error) => {
                        this.$message.error("添加失败");
                        console.log(error);
                    })
                })
            },
            quxiao(){
                window.history.back(-1); // 返回上一页
            }
        },
        created() {
            this.BASE_URL = BASE_URL;
        }
    };
</script>

<style>
.fangjian{
    margin-right: 20px;
    display: inline-block;
}
.roomNumText{
    margin-bottom: -15px;
}
.roomNumText span{
    color: #606266;
}
.addSpaceForm{
    width: 880px;
    margin: 0 auto;
}
.form-img{
    max-width:140px;
    max-height:140px;
}
</style>
